<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--让手机版生效-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shine课程表Web版-登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/popper.min.js" type="module"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <link rel="stylesheet" th:href="@{/styles/login.css}">
</head>
<body>
<!--    &lt;!&ndash;上部留空一部分作为logo显示区&ndash;&gt;-->
<!--    <div class="top">-->
<!--        &lt;!&ndash;这个设置center是相对于logo宽度的基础上居中，这样就做出了一个logo位置的效果&ndash;&gt;-->
<!--        <div class="logo center">-->
<!--            <img th:src="@{/images/logo.png}" alt="">-->
<!--        </div>-->
<!--    </div>-->

    <!--顶部栏-->
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
        <!--        <a href="/index"><img class="navbar-brand" src="../static/images/logo.png" th:src="@{/images/logo.png}" alt=""/></a>-->
        <a href="/index">
            <span class="navbar-brand">Sunshine课程表</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <!--这块要设置mr-auto，要不登录注册不能居右-->
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/index" style="color: white;font-weight: bold;margin-right: 16px">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/schedule" style="color: white;font-weight: bold;margin-right: 16px">课表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/function" style="color: white;font-weight: bold">功能</a>
                </li>
            </ul>
        </div>
    </nav>

    <!--下半部分主界面显示登录，登录窗口靠右，左边显示背景为必应-->
    <div class="main container-fluid">
        <div class="row" style="margin: 75px auto">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="login">
                    <div class="login_center">
                        <!--登录顶部提示文字-->
                        <div class="login_top"><span id="login_top_text">登录</span>Sunshine课程表</div>
                        <hr>
                        <form id="loginForm" onsubmit="return false;" action="##">
                            <div class="login_info">
                                用户名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input class="login_info_input" type="text" name="userId" id="userId" placeholder="请输入账号"/>
                            </div>
                            <div class="login_info">
                                密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input class="login_info_input" type="password" name="password" id="password" placeholder="请输入密码"/>
                            </div>
                            <!--确认密码框，默认为隐藏-->
                            <div class="login_info" id="div_password_again" hidden="hidden">
                                确认密码&nbsp;&nbsp;
                                <input class="login_info_input" type="password" name="passwordAgain" id="password_again" placeholder="请确认密码"/>
                            </div>
                            <div class="login_buttons">
                                <input class="button" type="button" name="to_register" id="to_register" value="注册" onclick="registerFun()">
                                <input class="button" type="submit" name="to_login" id="to_login" value="登录" onclick="toLoginOrRegister()">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-sm-3"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function registerFun() {
        $(function () {
            /*后面加[0]或者通过get()方法才得到的是element对象*/
            const passwordAgainDiv = $("#div_password_again")[0];
            const loginTopText = $("#login_top_text")[0];
            //请注意，这里to_login按钮本来就应该是登录按钮，但是这里为了动态适应，需要改为登录或注册
            const loginOrRegister = $("#to_login")[0];
            const toRegister = $("#to_register");
            passwordAgainDiv.hidden = !passwordAgainDiv.hidden;
            if (passwordAgainDiv.hidden) {
                //用innerText方法来更改文字内容
                loginTopText.innerText = "登录";
                //按钮直接用value
                toRegister[0].value = "注册";
                //将确认密码框清空
                toRegister.innerText = "";
                //将登录按钮恢复为登录功能
                loginOrRegister.value = "登录"
            } else {
                loginTopText.innerText = "注册";
                toRegister[0].value = "返回登录";
                //将登录按钮临时更改为注册功能
                loginOrRegister.value = "注册"
            }
        });
    }

    function toLoginOrRegister() {
        //等js加载好后再进行函数初始化
        $(function () {
            //用户名内容
            const userIdVal = $("#userId").val();
            //密码内容
            const passwordVal = $("#password").val();
            //再次输入密码控件
            const divPasswordAgain = $("#div_password_again");
            //再次输入密码内容
            const passwordAgainVal = $("#password_again").val();
            //todo 三个等号的强等于的意思

            if (userIdVal == null || userIdVal.length <= 0) {
                Swal.fire('错误','请输入用户名', 'error')
            } else if (passwordVal == null || passwordVal.length <= 0) {
                Swal.fire('错误','请输入密码', 'error')
            } else if (userIdVal.length <= 4 || passwordVal.length <= 7) {
                Swal.fire('警告', '您输入的账号或密码长度过短', 'warning')
            } else {
                //登录请求
                if (divPasswordAgain[0].hidden) {
                    $.ajax({
                        type: 'POST',
                        url: '/login',
                        data: $("#loginForm").serialize(),
                        success: function (result) {
                            if (result.resultCode == 200) {
                                //请求成功后跳转到主界面
                                location.href = "/index"
                            } else {
                                Swal.fire('错误','用户名或密码错误', 'error')
                            }
                        },
                        error: function () {
                            Swal.fire('登录失败', {
                                icon: 'error'
                            })
                        }
                    })
                }
                //注册请求
                else {
                    if (passwordAgainVal == passwordVal) {
                        $.ajax({
                            type: 'POST',
                            url: '/register',
                            data: $("#loginForm").serialize(),
                            success: function (result) {
                                if (result.resultCode == 200) {
                                    Swal.fire('成功','注册成功', 'success')
                                } else {
                                    Swal.fire('错误', '该用户名已经被注册', 'error')
                                }
                            },
                            error: function () {
                                Swal.fire('错误', '注册失败', 'error')
                            }
                        })
                    } else {
                        Swal.fire('错误', '两遍密码输入不一致', 'error')
                    }
                }
            }
        });
    }
</script>
</html>